<!-- 数字竞猜-竞猜弹窗 -->
<template>
    <n-modal class="tips_sm_modal" :show="show" :mask-closable="false">
        <n-card class="form_card" :bordered="false" size="huge" role="dialog" aria-modal="true">
            <div class="form_container vertical">
                <div class="header rel center">
                    <span>数字竞猜活动</span>
                    <span class="close abs center pointer t-sm" @click="show = false">
                        <iconpark-icon icon-id="tanctongyguanb" color="#fff" size="1rem"></iconpark-icon>
                    </span>
                </div>
                <div class="banner">
                    <img style="width:100%;height:100%" src="/img/activity/act_b.webp" alt="^">
                </div>

                <!-- 表单 -->
                <div class="guess_form">
                    <div class="top">
                        <div style="display: flex;align-items: center;justify-content: flex-start;">
                            <span>{{ props.allData.roundid }}期中奖号码：</span>
                            <span v-if="props.allData.result == -1">{{ props.allData.status == 3 ? '派奖中' : '未开奖'
                                }}</span>
                            <template v-if="props.allData.result != -1">
                                <Ball :val="balls[0]" :size="18" />
                                <Ball :val="balls[1]" :size="18" />
                            </template>
                        </div>
                        <img class="gift" src="/img/activity/gift.webp" alt="">
                    </div>
                    <div class="bottom">
                        <div class="subtitle">您的竞猜号码</div>
                        <div class="rs_box" v-if="props.allData.numbers == -1">
                            <div class="rs_item" @click.native="clickBall(0)">
                                <Ball :val="betNumbers[0]" />
                                <div class="rs_text">十位</div>
                            </div>
                            <div class="rs_item" @click.native="clickBall(1)">
                                <Ball :val="betNumbers[1]" />
                                <div class="rs_text">个位</div>
                            </div>
                        </div>
                        <div class="rs_box" v-if="props.allData.numbers != -1">
                            <div class="rs_item">
                                <Ball :val="getIndexFromNumbers(props.allData.numbers, 0)" />
                                <div class="rs_text">十位</div>
                            </div>
                            <div class="rs_item">
                                <Ball :val="getIndexFromNumbers(props.allData.numbers, 1)" />
                                <div class="rs_text">个位</div>
                            </div>
                        </div>
                        <!-- 未竞猜 -->
                        <template v-if="[0].includes(props.allData.status) && props.allData.numbers == -1">
                            <div class="subtitle">请点击选择</div>
                            <div class="rs_list">
                                <Ball @click.native="clickItem(i - 1)" :val="i - 1" v-for="i in 10" />
                            </div>
                            <div class="btns">
                                <n-flex @click="deleteItem" align="center" justify="center"
                                    class=" button n-buttom submit_btn weight_5 pointer red_btn"
                                    :class="{ 'disabled_btn': ['un', 'ed'].includes(betNumbers[0]) && ['un', 'ed'].includes(betNumbers[1]) }"
                                    block>
                                    删除
                                </n-flex>
                                <n-flex @click="goBet" align="center" justify="center"
                                    class=" button n-buttom submit_btn weight_5 pointer"
                                    :class="(betNumbers[0] == 'un' || betNumbers[0] == 'ed' || betNumbers[1] == 'un' || betNumbers[1] == 'ed') ? 'disabled_btn' : 'button_color'"
                                    block>
                                    确定
                                </n-flex>
                            </div>
                        </template>

                        <!-- 已竞猜/未参与 -->
                        <template
                            v-if="[1, 2, 3].includes(props.allData.status) || [4].includes(props.allData.status) && props.allData.numbers == -1 || [0].includes(props.allData.status) && props.allData.numbers != -1">
                            <div class="subtitle" v-if="props.allData.numbers != -1">您已参与今日竞猜</div>
                            <div class="subtitle" v-if="props.allData.numbers == -1">您未参与竞猜</div>

                            <div class="rs_box">
                                <span style="color:#E43939" v-if="props.allData.numbers != -1">请耐心等待开奖</span>
                                <span style="color:#E43939" v-if="props.allData.numbers == -1">今日竞猜活动结束，请明日再来！</span>
                                <!-- <span style="color:#FAC904">中奖奖金：800</span>
                                <div class="rs_box_tip">第一次领取，需要进行简单认证！</div> -->
                            </div>
                            <div class="btns">
                                <!-- <n-flex align="center" justify="center"
                                    class=" button n-buttom submit_btn weight_5 pointer green_btn" block>
                                    分享
                                </n-flex> -->
                                <n-flex align="center" justify="center"
                                    class=" button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                    分享
                                </n-flex>
                                <n-flex align="center" justify="center"
                                    class="button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                    领取
                                </n-flex>
                            </div>
                        </template>

                        <!-- 已派奖 -->
                        <template v-if="[4].includes(props.allData.status) && props.allData.numbers != -1">

                            <!-- 未中奖 -->
                            <template v-if="!currTermResult.ranking">
                                <div class="subtitle">您未中奖</div>
                                <div class="rs_box">
                                    <span style="color:#E43939">明日再接再厉！</span>
                                </div>
                                <div class="btns">
                                    <n-flex align="center" justify="center"
                                        class=" button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                        分享
                                    </n-flex>
                                    <n-flex align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                        领取
                                    </n-flex>
                                </div>
                            </template>

                            <!-- 未上榜 -->
                            <template v-else-if="!currTermResult.prize">
                                <div class="subtitle">很遗憾，您未上榜单</div>
                                <div class="rs_box">
                                    <span style="color:#E43939">明日再接再厉！</span>
                                </div>
                                <div class="btns">
                                    <n-flex align="center" justify="center"
                                        class=" button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                        分享
                                    </n-flex>
                                    <n-flex align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                        领取
                                    </n-flex>
                                </div>
                            </template>

                            <!-- 已中奖 -->
                            <template v-else>
                                <div class="subtitle">恭喜！您已中奖</div>
                                <div class="rs_box">
                                    <span style="color:#FAC904">中奖奖金：{{ currTermResult.prize }}</span>
                                    <div v-if="props.allData.set_fb == 0" class="rs_box_tip">第一次领取，需要进行简单认证！</div>
                                </div>
                                <div class="btns">
                                    <!-- 未分享 -->
                                    <n-flex @click="goShare" v-if="props.allData.joined < 3 && !shareStatus"
                                        align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer green_btn" block>
                                        分享
                                    </n-flex>

                                    <!-- 已分享 & 未绑定 -->
                                    <n-flex @click="goSet"
                                        v-if="(props.allData.joined >= 3 || shareStatus) && props.allData.set_fb != 1"
                                        align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer green_btn" block>
                                        去认证
                                    </n-flex>

                                    <!-- 已分享 & 已绑定 -->
                                    <n-flex
                                        v-if="(props.allData.joined >= 3 || shareStatus) && props.allData.set_fb == 1"
                                        align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                        分享
                                    </n-flex>
                                    <n-flex @click="getMoney"
                                        v-if="(props.allData.joined == 3 || shareStatus) && props.allData.set_fb == 1"
                                        align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer green_btn" block>
                                        领取
                                    </n-flex>
                                    <n-flex v-else align="center" justify="center"
                                        class="button n-buttom submit_btn weight_5 pointer disabled_btn" block>
                                        {{ props.allData.joined == 6 ? '已领取' : '领取' }}
                                    </n-flex>
                                </div>
                            </template>

                        </template>
                    </div>
                </div>

                <!-- 数据 -->
                <div class="guess_data">
                    <div class="tabs">
                        <div class="tab" :class="{ 'tab_active': tab == 1 }" @click="tab = 1">我的竞猜</div>
                        <div class="tab" :class="{ 'tab_active': tab == 2 }" @click="tab = 2">竞猜排名</div>
                    </div>

                    <!-- 我的竞猜 -->
                    <div class="my_guess" style="position: relative" v-if="tab == 1">
                        <div style="width:100%;text-align:center;position: absolute;top:60px;left:0;color:#AFBABD"
                            v-if="!myRecord[0].length">
                            您还未竞猜，没有您的竞猜信息</div>
                        <div class="my_guess_box" v-for="index in 2" :key="index">
                            <template v-for="item in myRecord[index - 1]">
                                <div class="mg_title">{{ item.roundid }}</div>
                                <div class="mini_table" style="margin-bottom: 12px;">
                                    <div class="tr">
                                        <div class="td">账号</div>
                                        <div class="td td_val">{{ maskString(item.username) }}</div>
                                    </div>
                                    <div class="tr">
                                        <div class="td">竞猜号码</div>
                                        <div class="td td_val">
                                            <Ball style="margin-right: 8px;" :val="getIndexFromNumbers(item.numbers, 0)"
                                                :size="18" />
                                            <Ball :val="getIndexFromNumbers(item.numbers, 1)" :size="18" />
                                        </div>
                                    </div>
                                    <div class="tr">
                                        <div class="td">排名</div>
                                        <div class="td td_val">{{ item.ranking || '--' }}</div>
                                    </div>
                                    <div class="tr">
                                        <div class="td">中奖</div>
                                        <div class="td td_val">{{ item.prize }}</div>
                                    </div>
                                    <div class="tr" style="cursor: pointer;" @click="changeRecord(item.roundid)">记录
                                    </div>
                                    <div class="tr" style="cursor: pointer;" @click="openInfo(item.roundid)">
                                        <img style="width: 12px;height: 12px" src="/img/activity/up.webp" alt="">
                                    </div>
                                </div>
                                <div class="table" v-if="openTerm == item.roundid">
                                    <div class="tr th">
                                        <div class="td">账号</div>
                                        <div class="td">竞猜号码</div>
                                        <div class="td">排名</div>
                                        <div class="td">竞猜时间</div>
                                    </div>
                                    <div class="tr" :class="{ 'curr_tr': info.full_name == rank.username }"
                                        v-for="(rank, i) in latest_record" :key="index + '_' + i">
                                        <div class="td">{{ maskString(rank.username) }}</div>
                                        <div class="td">
                                            <Ball style="margin-right: 8px;" :val="getIndexFromNumbers(rank.numbers, 0)"
                                                :size="18" />
                                            <Ball :val="getIndexFromNumbers(rank.numbers, 1)" :size="18" />
                                        </div>
                                        <div class="td">{{ rank.ranking || '--' }}</div>
                                        <div class="td">{{ convertObjectToDateString2(rank.bet_time) }}</div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <!-- <div class="bottom_shadow"></div> -->
                    </div>



                    <!-- 竞猜排行 -->
                    <div class="guess_rank" v-if="tab == 2">
                        <div class="rank_title">
                            <div>
                                <span v-if="!currTermResult.ranking">您未参与今日竞猜</span>
                                <span v-else>您的排名为：{{ currTermResult.ranking }}</span>
                            </div>
                            <div class="rank_term">
                                <div>请选择期数：</div>
                                <n-select @change="changeTerm" class="rank_term_select" v-model:value="term"
                                    :options="rounds" />
                            </div>
                        </div>

                        <div class="table">
                            <div class="tr th">
                                <div class="td">账号</div>
                                <div class="td">竞猜号码</div>
                                <div class="td">排名</div>
                                <div class="td">中奖</div>
                            </div>
                            <div class="tr" :class="{ 'curr_tr': info.full_name == item.username }"
                                v-for="(item, i) in his_record" :key="i">
                                <div class="td">{{ maskString(item.username) }}</div>
                                <div class="td">
                                    <Ball style="margin-right: 8px;" :val="getIndexFromNumbers(item.numbers, 0)"
                                        :size="18" />
                                    <Ball :val="getIndexFromNumbers(item.numbers, 1)" :size="18" />
                                </div>
                                <div class="td">
                                    <img v-if="item.ranking == 1" class="rank_icon" src="/img/activity/rank_1.webp"
                                        alt="">
                                    <img v-else-if="item.ranking == 2" class="rank_icon" src="/img/activity/rank_2.webp"
                                        alt="">
                                    <img v-else-if="item.ranking == 3" class="rank_icon" src="/img/activity/rank_3.webp"
                                        alt="">
                                    <span v-else>{{ item.ranking || '--' }}</span>
                                </div>
                                <div class="td money">{{ item.prize }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </n-card>

    </n-modal>

    <DialogRank ref="DialogRankRef" :maskString="maskString" :list="latest_record"
        :getIndexFromNumbers="getIndexFromNumbers" />

    <!-- 认证fb -->
    <DialogStatus @setfb="setfbReq" :key="'setfb'" ref="DialogStatusRef" :status="2" />
</template>

<script setup lang="ts">
import { NetPacket } from '@/netBase/NetPacket.ts';
import { MessageEvent2 } from '@/net/MessageEvent2.ts';
import { NetMsgType } from '@/netBase/NetMsgType.ts';
import { ref, computed, onUnmounted } from "vue"
import { convertObjectToDateString2 } from "@/utils/dateTime"
import Ball from "./Ball.vue"
import DialogRank from "./DialogRank.vue"
import { Message } from "@/utils/discreteApi.ts";
import DialogStatus from "./DialogStatus.vue"
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import H5Websocket from "@/net/Net1";


const maskString = (str: any) => {
    if (str.length <= 5) {
        return str; // 如果字符串长度小于或等于5，直接返回
    }
    const firstThree = str.slice(0, 3); // 获取前3位
    const lastTwo = str.slice(-2); // 获取后2位
    return `${firstThree}****${lastTwo}`; // 用 **** 替代中间部分
}

const userInfo = User(pinia);
const { info } = storeToRefs(userInfo);
const show = ref(false)
const tab = ref(1) // 1-我的竞猜  2-竞猜排行
const DialogRankRef = ref()

const emits = defineEmits(['success'])

const props = defineProps({
    allData: {
        type: Object,
        default: () => { }
    }
})
const balls = computed(() => { // 中奖号码
    if (props.allData.result == -1) return []
    const str: string = props.allData.result.toString()
    return [str[0], str[1]]
})
const rounds = computed(() => { // 历史期数
    const arr: any = []
    for (let i = 0; i < 5; i++) {
        arr.push(props.allData.roundid - i)
    }
    return arr.map((item: any) => {
        return {
            label: item,
            value: Number(item)
        }
    })
})


// 获取中奖记录
const his_record: any = ref([])
const getHis = () => {
    his_record.value = []
    const req: any = NetPacket.req_numbers_betting_rank();
    req.roundid = term.value
    req.page = 1
    H5Websocket.sendMessageHandler(req);
}
const handleHis = (res: any) => {
    his_record.value = res.my_records || []
}
// 排行期号
const term = ref(null)
const changeTerm = () => {
    setTimeout(() => {
        getHis()
    }, 0)
}



// 当期中奖详情
const currTermResult = computed(() => {
    if (!props.allData.my_records.length) return {}
    const target = props.allData.my_records.find((item: any) => item.roundid == props.allData.roundid)
    return target || {}
})
// 我的记录
const openTerm = ref(null)
const myRecord: any = computed(() => {
    const arr1: any = []
    const arr2: any = []
    props.allData.my_records.map((item: any, i: any) => {
        if (i % 2 == 0) {
            arr1.push(item)
        } else {
            arr2.push(item)
        }
    })
    return [arr1, arr2]
})
const changeRecord = (id: any) => { // 展开这一期记录
    myTerm.value = id
    openTerm.value = id
    latest_record.value = []
    getRecord()
}
const openInfo = (id: any) => {
    changeRecord(id)
    DialogRankRef.value.open()
}

// 当期详情
const myTerm: any = ref(null)
const latest_record: any = ref([])
const getRecord = () => {
    const req = NetPacket.req_numbers_record_details();
    req.roundid = myTerm.value
    req.page = 1
    H5Websocket.sendMessageHandler(req);
}
const handleRecord = (res: any) => {
    latest_record.value = res.my_records || []
}

const shareStatus = ref(false)
const open = () => {
    console.error('----->', props.allData)
    shareStatus.value = false
    show.value = true
    term.value = props.allData.roundid
    myTerm.value = props.allData.roundid
    openTerm.value = props.allData.roundid
    getRecord()
    setTimeout(() => {
        getHis()
    }, 500)


    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_numbers_record_details, handleRecord);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_numbers_betting_rank, handleHis);
}



// 竞猜  -----------------------------------------
const betNumbers: any = ref(['un', 'un'])
const clickBall = (i: any) => { // 点击球
    if (betNumbers.value[i] == 'un') {
        betNumbers.value[i] = 'ed'
        if (i == 0 && betNumbers.value[1] == 'ed') {
            betNumbers.value[1] = 'un'
        }
        if (i == 1 && betNumbers.value[0] == 'ed') {
            betNumbers.value[0] = 'un'
        }
    } else if (betNumbers.value[i] == 'ed') {
        betNumbers.value[i] = 'un'
    } else if (betNumbers.value[i] != 'ed' && betNumbers.value[i] != 'un') {
        betNumbers.value[i] = 'ed'
    }
}
const clickItem = (i: any) => { // 选球
    if (betNumbers.value[1] == 'ed') {
        return betNumbers.value[1] = i
    }
    if (betNumbers.value[0] == 'ed') {
        return betNumbers.value[0] = i
    }

    if (betNumbers.value[1] == 'un') {
        return betNumbers.value[1] = i
    }
    if (betNumbers.value[0] == 'un') {
        return betNumbers.value[0] = i
    }
}
const deleteItem = () => { // 删除球
    if (betNumbers.value[0] != 'un' && betNumbers.value[0] != 'ed') {
        return betNumbers.value[0] = 'un'
    }
    if (betNumbers.value[1] != 'un' && betNumbers.value[1] != 'ed') {
        return betNumbers.value[1] = 'un'
    }
}
const goBet = () => { // 投注
    if (betNumbers.value[0] == 'un' || betNumbers.value[1] == 'un') return
    const req = NetPacket.req_start_betting();
    req.numbers = Number(betNumbers.value[0] + '' + betNumbers.value[1])
    H5Websocket.sendMessageHandler(req);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_start_betting, handleBet);
}
const handleBet = (rs: any) => {
    if (rs && !rs.rlt) {
        Message.success('投注成功')
        setTimeout(() => {
            emits('success')
        }, 500)
        return
    }
    let msg = ''
    switch (rs.rlt) {
        case 1:
            msg = '当前时间不能参加活动'
            break
        case 2:
            msg = '已参加或未分享'
            break
        case 3:
            msg = 'IP和设备号已参加'
            break
    }
    Message.error(msg)
}
// 分享
const goShare = () => {
    shareStatus.value = true
    // @ts-ignore
    FB.ui({
        method: 'share',
        href: props.allData.share_url,
        quote: `我在PKBET竞猜活动中排名为第${currTermResult.value.ranking}名， 获得了${currTermResult.value.prize}奖金，你也来试试吧`,
        // hashtag: '#sharebox', // 可选
        // picture: imageUrl // 可选
    }, function (response: any) {
        // console.error(response)
        if (response && !response.error_message) {
            const req: any = NetPacket.req_numbers_betting_share();
            req.type = 1
            H5Websocket.sendMessageHandler(req);
        } else {
            // DialogStatusRef.value.open()
        }

        setTimeout(() => {
            emits('success')
        }, 1000)
    });
}
// 去认证
const DialogStatusRef = ref()
const goSet = () => {
    DialogStatusRef.value.open()
}
const setfbReq = (link: any) => {
    const req = NetPacket.req_set_fb_homepage();
    req.home = link
    H5Websocket.sendMessageHandler(req);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_set_fb_homepage, handleSetfb);
}
const handleSetfb = (rs: any) => {
    if (rs && !rs.rlt) {
        Message.success('设置成功')
        setTimeout(() => {
            emits('success')
        }, 500)
    }
}
// 领奖
const getMoney = () => {
    const req = NetPacket.req_numbers_betting_claim_bonus();
    H5Websocket.sendMessageHandler(req);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_numbers_betting_claim_bonus, handleMoney);
}
const handleMoney = (rs: any) => {
    if (rs && !rs.rlt) {
        Message.success('领取成功')
    } else {
        Message.error('领取失败')
    }
    setTimeout(() => {
        emits('success')
    }, 500)
}


onUnmounted(() => {
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_numbers_record_details, null);
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_numbers_betting_rank, null);
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_start_betting, null);
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_set_fb_homepage, null);
    MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_numbers_betting_claim_bonus, null);
})

defineExpose({
    open
})


// 根据numbers 获取对应下标的数字值
const getIndexFromNumbers = (numbers: any, i: any) => {
    if (numbers == -1) return 'un'
    if (numbers.toString().length == 2) {
        return numbers.toString()[i]
    }
    if (numbers.toString().length == 1) {
        if (i == 0) return 0
        if (i == 1) return numbers
    }
    return 'un'
}
</script>

<style lang="less" scoped>
.form_container {
    .header {
        position: relative;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid rgba(38, 41, 76, 1);
        font-size: 20px;

        .close {
            right: 20px;
        }
    }

    .banner {
        margin: 20px auto 0 auto;
        width: 880px;
        height: 150px;
        border: 1px solid #26294C;
        border-radius: 8px;
        overflow: hidden;
    }

    .guess_form {
        width: 880px;
        height: 414px;
        border-radius: 12px;
        overflow: hidden;
        margin: 20px auto;
        position: relative;

        .top {
            background: linear-gradient(95deg, #FA397E 0%, #FF852D 99.32%), linear-gradient(90deg, #5A6CFF 0%, #7E1CFF 100%);
            height: 98px;
            width: 100%;
            padding: 18px 20px;
            color: #FFF;
            font-size: 16px;
            position: relative;

            .gift {
                width: 60px;
                height: 60px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 18px;
            }
        }

        .bottom {
            height: 356px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background-size: 100% 100%;
            background-image: url('/img/activity/Subtract.webp');
            padding: 24px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .subtitle {
                color: #AFB6BD;
                font-size: 14px;
                font-weight: 500;
                line-height: normal;
                margin-bottom: 8px;
            }

            .rs_box {
                height: 98px;
                background-color: #0C0E2F;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 20px;
                position: relative;

                .rs_item {
                    margin: 0 100px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .rs_text {
                        margin-top: 4px;
                        color: #AFB6BD;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }

                .rs_box_tip {
                    position: absolute;
                    left: 0;
                    bottom: -21px;
                    color: #EB808C;
                }
            }

            .rs_list {
                margin-bottom: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }


            .btns {
                display: flex;
                align-items: center;
                justify-content: center;

                .button {
                    width: 240px;
                    height: 46px;
                    margin: 0 10px;
                    border-radius: 12px;
                }

                .red_btn {
                    background: linear-gradient(180deg, #F45248 0%, #EC3E3E 100%);
                }

                .disabled_btn {
                    color: #AFB6BD;
                    background: linear-gradient(180deg, #7F7A94 0.17%, #6A6580 100%);
                    box-shadow: 0.5px 0.5px 1px 0px #A6A2BA inset;
                }

                .green_btn {
                    background: linear-gradient(180deg, #57BC8C 0.17%, #2DA36B 100%);
                    box-shadow: 0.5px 0.5px 1px 0px #A9F5D1 inset;
                }
            }
        }
    }

    .guess_data {
        border: 1px solid #26294C;
        background-color: #171B44;
        height: 660px;
        border-radius: 16px;
        padding: 20px;
        width: 880px;
        margin: 0 auto 30px auto;
        display: flex;
        flex-direction: column;

        .tabs {
            display: flex;
            height: 44px;
            flex-shrink: 0;
            background-color: #0D0E2E;
            border-radius: 10px;
            margin-bottom: 16px;

            .tab {
                flex: 1;
                color: #AFB6BD;
                font-size: 16px;
                font-weight: 400;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                padding: 2px;
            }

            .tab_active {
                border-radius: 10px;
                background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
                box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
                color: #FFF;
            }
        }

        .my_guess {
            flex: 1;
            overflow-y: auto;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            .mg_title {
                color: #AFB6BD;
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 8px;
            }

            .mini_table {
                width: 410px;
                height: 80px;
                border: 1px solid #26294C;
                border-radius: 16px;
                background-color: #1B1F4B;
                display: flex;
                overflow: hidden;

                .tr {
                    flex: 1;
                    border-right: 1px solid #26294C;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    color: #FFF;
                    font-size: 16px;


                    .td {
                        width: 100%;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .td_val {
                        background-color: #121336;
                        color: #AFBABD;
                        font-size: 14px;
                    }

                    &:last-child {
                        border-right: none;
                    }
                }
            }

            .table {
                width: 410px;
                border: 1px solid #26294C;
                border-radius: 16px;
                background-color: #1B1F4B;
                margin-bottom: 24px;

                .tr {
                    width: 100%;
                    height: 40px;
                    display: flex;
                    align-items: stretch;
                    border-bottom: 1px solid #26294C;

                    &:nth-child(even) {
                        background-color: #121336;
                    }

                    &:nth-child(odd) {
                        background-color: #0D0E2E;
                    }

                    &:last-child {
                        border-bottom: none;
                    }

                    .td {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-right: 1px solid #26294C;
                        color: #AFBABD;
                        font-size: 14px;
                        font-weight: 400;

                        &:last-child {
                            border-right: none;
                        }
                    }
                }

                .curr_tr {
                    border: 1px solid #FAC904;

                    .td {
                        color: #FAC904;
                    }
                }

                .th {
                    background-color: rgba(0, 0, 0, 0) !important;

                    .td {
                        color: #fff;
                        font-size: 16px;
                    }
                }
            }

            .my_guess_box {
                width: calc(50% - 10px);
            }

            .bottom_shadow {
                background: linear-gradient(180deg, rgba(23, 27, 68, 0.00) 0%, #171B44 100%);
                width: calc(100% - 80px);
                position: absolute;
                height: 60px;
                bottom: 30px;
                left: 40px;
                z-index: 9;
            }
        }

        .guess_rank {
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .rank_title {
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #AFB6BD;
                font-size: 16px;
                font-weight: 400;

                .rank_term {
                    display: flex;
                    align-items: center;

                    .rank_term_select {
                        width: 200px;

                        ::v-deep(.n-base-selection) {
                            border: 1px solid rgba(175, 182, 189, 0.32) !important;
                        }

                        ::v-deep(.n-base-selection__border) {
                            border: 1px solid rgba(175, 182, 189, 0.32) !important;
                        }
                    }
                }
            }

            .table {
                flex: 1;
                margin-top: 12px;
                overflow-y: auto;
                width: 820px;
                border: 1px solid #26294C;
                border-radius: 16px;
                background-color: #1B1F4B;

                .tr {
                    width: 100%;
                    height: 40px;
                    display: flex;
                    align-items: stretch;
                    border-bottom: 1px solid #26294C;

                    &:nth-child(even) {
                        background-color: #121336;
                    }

                    &:nth-child(odd) {
                        background-color: #0D0E2E;
                    }

                    &:last-child {
                        border-bottom: none;
                    }

                    .td {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-right: 1px solid #26294C;
                        color: #AFBABD;
                        font-size: 14px;
                        font-weight: 400;

                        &:last-child {
                            border-right: none;
                        }

                        .rank_icon {
                            width: 38px;
                            height: 24px;
                        }
                    }

                    .money {
                        color: #FAC904;
                    }
                }

                .curr_tr {
                    border: 1px solid #FAC904;

                    .td {
                        color: #FAC904;
                    }
                }

                .th {
                    background-color: rgba(0, 0, 0, 0) !important;

                    .td {
                        color: #fff;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less" scoped>
// @import '@/assets/CommonForm.less';

// 弹窗提示
.tips_sm_modal {
    &.form_card {
        width: 960px !important;

        :deep(.n-card__content) {
            padding: 0 !important;
        }
    }
}
</style>